<template>
  <div class="bill-container">
    <!-- <Navbar
      :title="title"
      :showBack="false"
      class="bill-navbar"
    /> -->
    <div class="bill-main driver-height">
      <!-- 基础汇总 -->
      <div class="bill-base">
        <div class="base-title">
          <u-image src="@/static/images/shop.png" width="24px" height="24px"></u-image>
          <span class="text">老张水果</span>
        </div>
        <div class="base-card">
          <div class="base-card__customer">
            <span>{{ customer.customerName }}</span>
            <span class="phone">{{ customer.customerPhone }}</span>
          </div>
          <div class="base-card__content">
            <div class="base-card__content-left">
              <div class="date">2024-09-08</div>
              <div class="total">总欠（4单）</div>
            </div>
            <div class="base-card__content-right">
              <span class="value">38888801880.5元</span>
              <!-- <u-icon name="arrow-right" size="24" color="#fff"></u-icon> -->
            </div>
          </div>
          <div class="base-card__buttons">欠款明细</div>
        </div>
      </div>
      <!-- 还款详情 -->
      <div class="bill-repayment">
        <div class="bill-repayment-title">
          <div class="u-desc-left">还款详情</div>
          <div class="u-desc-right">
          	<div class="u-desc-right-title">更多</div>
          	<u-icon name="arrow-right" width="16px" height="16px"></u-icon>
          </div>
        </div>
        <div class="bill-repayment-time">
        	<div class="u-desc-time-left">
        		<div class="u-desc-time-line"></div>
        		<div class="u-desc-time-left-text">{{latestRepayment.repaymentTime || '暂无还款'}}</div>
        	</div>
        	<div class="u-desc-time-right">{{latestRepayment.repaymentAmount || 0}}</div>
        </div>
      </div>
      <!-- 采购总额 -->
    </div>
  </div>
</template>

<script>
  import Navbar from '@/components/navbar/index.vue'

  export default {
    components: {
      Navbar
    },
    data() {
      return {
        title: '对账单',
        customer: {
          customerName: '张三',
          customerPhone: '15666666666',
        },
        latestRepayment: {
          repaymentTime: '2024-09-05 13:23:17',
          repaymentAmount: 28000
        }
      };
    }
  }
</script>

<style lang="scss">
.bill-main {
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
  background: #f7f8f9;
}
.bill-base {
  padding: 10px;
  .base-title {
    display: flex;
    align-items: center;
    .text {
      margin-left: 6px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.base-card {
  margin-top: 10px;
  padding: 10px;
  background: #449853;
  border-radius: 8px;
}
.base-card__customer {
  padding-bottom: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  border-bottom: 1px solid #fff;
  .phone {
    margin-left: 6px;
  }
}
.base-card__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  color: #fff;
}
.base-card__content-left {
  flex-shrink: 0;
  .total {
   margin-top: 5px;
  }
}
.base-card__content-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-grow: 1;
  margin-left: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  .value {
    text-align: right;
    font-size: 24px;
    font-weight: bold;
  }
}
.base-card__buttons{
  height: 36px;
  line-height: 36px;
  border-radius: 36px;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(213, 255, 218));
  text-align: center;
  color: #449853;
}

.bill-repayment {
  margin: 0 10px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
}
.bill-repayment-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  .u-desc-left {
    color: #333;
    font-size: 15px;
  }
  .u-desc-right {
    display: flex;
    align-items: center;
    .u-desc-right-title {
      color: #666666;
      font-size: 15px;
    }
  }
}
.bill-repayment-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .u-desc-time-left {
    display: flex;
    align-items: center;
    .u-desc-time-left-text {
      color: #333333;
      font-size: 15px;
      font-weight: 500;
    }
    .u-desc-time-line {
      width: 2px;
      background-color: #29AC6F;
      height: 30px;
      margin-right: 5px;
    }
  }
  .u-desc-time-right {
  	font-size: 15px;
  	font-weight: 500;
    color: #29AC6F;
  }
}
</style>
